/* 主页 */
.main-container{
  width: 100%;
  height: 100%;
  
  /* 弹性布局 */
 display: flex;
 align-items: center;
 justify-content: center; 
 position: absolute;
 z-index: 2;
}


.main-container .main {
    
  width: 960px;
  height: 660px;
  border-radius: 10px;

  display: flex;
}

.main .left {
    height: 100%;
    width: 33%;
    background-color: rgb(46, 46,46);
    /* 设置 左上角和左下角圆角 */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.left .user{
      width:  100%;
      height: 15%;
      display: flex;
       padding: 10px 18px;
      justify-content: left;
      align-items: center;
}


.left .user  img{
    size: 100% 100%;
    width: 20%;
    height: 70%;
    border-radius: 5px;
    outline: none;
    border: none;
}

.left .user h3{
    padding-left: 5px;
    font-size: 21px;
    font-weight: 700;
    color: aliceblue;
}

/* 搜索框 */
.left .search{
    height: 10%;
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 0px 15px;
}

.left .search input{

    height: 60%;
    width: 69%;
    outline: none;
    border: none;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    line-height: 35px;
    font-size: 14px;
    color: aliceblue;
    background-color: rgb(22, 20, 20);
    /* 让输入框左边的文字不要这么靠左边 */
    padding-left: 10px;
}
/* 搜索按钮 */
.left .search button{
    height: 60%;
    width: 13%;
    background-image: url(/pic/搜索.png);
    outline: none;
    border: none;
    background-size: 70% 70%;
    background-position: center center;
    background-repeat: no-repeat;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: rgb(22, 20, 20);

}

.left .search button:active{
   background-color: rgb(72, 71, 71);
}



/* 会话标签 , 好友标签 */

.left .table{
    width: 100%;
    height: 8%;
    padding: 0px 20px;
    display: flex;
    align-items: center;
}

.table .session-table{
    height: 100%;
    width: 50%;
    background-image: url(/pic/对话2.png);
    outline: none;
    border: none;
    background-size: 34% 79%;
    background-position: center center;
    background-repeat: no-repeat;
    
}

.table .friend-table{
    height: 100%;
    width: 50%;
    background-image: url(/pic/联系人.png);
    outline: none;
    border: none;
    background-size: 33% 69%;
    background-position: center center;
    background-repeat: no-repeat;
}


/* 会话列表高度要根据上面的来得到 */
.main .list{
    height: 60%;
/* 当会话列表里的内容太多时,提供一个滚动条 */
   overflow: auto;
}

/* 滚动条隐藏, 把所有滚动条设置为隐藏 */

::-webkit-scrollbar{
    display: none;
}

.main .setting{
    display: flex;
    justify-content:left;
    align-items: center;
    padding-left: 10px;
    padding-top: 10px;
    outline: none;
    border: none;
}

.setting .no{
   content: url(/pic/设置.png);
     height: 25px;
     width: 25px;
    outline: none;
    border: none;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}
.setting .yes{
    content: url(/pic/设置2.png);
    height: 25px;
    width: 25px;
   outline: none;
   border: none;
   background-size: 100% 100%;
   background-position: center center;
   background-repeat: no-repeat;
}

.setting button{
    margin-left: 20px;
    width: 50px;
    height: 25px;
    background-color: rgb(135, 135, 135);
    color: aliceblue;
    border-radius: 5px;
    border: none;
    outline: none;
}

.hide{
    display: none;
}


/* 会话列表里每个会话框设置 */
.main .left .list li{
    height: 60px;
    color: aliceblue;
    padding: 10px 15px;
    /* 设置一条边框线,分开每个会话 */
    border-top: 1px solid black;

    /* 设置弹性布局 */
    display: flex;
}

/* 设置选中会话后的效果 ,选中会话后, 会话背景颜色修改  */
.main .left .list .selected{
    background-color: rgb(73, 72, 72);
}



/* 每个会话的联系人和消息预览设置 */
/* 每个好友的头像 */
.list li img{
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
}



/* 设置好友名字和消息预览 */
.list .list-li{
    width: 80%;
    padding-left: 5px;
}
.list .list-li2{
    display: flex ;
    width: 80%;
    padding-left: 5px;
    align-items: center;
}
.list .list-li2 p{
   width: 35%;
}

.list .list-li2 button{
    margin-left: 2%;
    height: 32px;
    width:26%;
    /* 字体颜色 */
    color: rgb(12, 163,4);
    border-radius: 5px;
    background-color: rgb(85, 85, 85);
    border: 1px solid rgb(203, 195, 195);
}
.main .left .list li h3{
    width: calc(100%-40px);
    height: 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
}
.main .left .list li p{
    width: calc(100%-40px);
    height: 20px;
    font-size: 13px;
    color: rgb(175, 177, 178);
}

/* 好友列表 */
.main .left .list li h4{
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}

/* 把 用了 .hide这个classs样式的隐藏起来 */
.main .left .hide{
    display: none;
}

/* 隐藏小红点 */
#session-list .unread-hide{
  display: none;
}


.main .right{

    height: 100%;
    width: 67%;
    background-color: rgb(245, 245, 245);
    /* 设置圆角 */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    /* 设置里面的聊天区域距离边框有一定距离 */
    padding: 20px 20px  ;

}

.right .title{
    width: 100%;
    height: 9%;
    text-align: center;
    line-height: 45px;
    /* 设置一条实线 */
    border-bottom: 1px  solid rgb(175, 173, 173);
    display: flex;
    align-items: center;
    justify-content: center;
}

.right .title h3{
    margin-left: 40%;
    width: 15%;
}

#deleteUser{
    margin-left: 35%;
    content: url(/pic/删除.png);
      height: 23px;
    width: 23px;
   outline: none;
   border: none;
   background-size: 100% 100%;
   background-position: center center;
   background-repeat: no-repeat;
}

.right .message-show{
      width: 100%;
      height: 73%;
       /* 设置一条实线 */
    border-bottom: 1px  solid rgb(175, 173, 173);
    /* 当聊天的内容太多时,提供一个滚动条 */
   overflow: auto;
}
/* 设置一条消息所占的大小 */
.message-show .message{
    width: 100%;
    /* 设置消息边距 */
    padding: 5px 5px ;
    /* 通过弹性布局 设置消息靠左靠右 */
    display: flex;
}

.message-show .message-left{
   /* 让子元素靠左 */
   justify-content: flex-start;
}


.message-show .message-right{
    /* 让子元素靠右 */
    justify-content: flex-end;
 }
 
/*  设置消息块 */
.message-show .box{
  /* 设置 最大宽度和 按内容决定宽度*/
  max-width: 300px;
  display: flex;
      align-items: center; /* 垂直居中 */
}
/* 设置头像 */
.box .user-img{
    height: 50px;
    width: 50px;
    padding: 5px 5px;
}

.user-img img{
    width: 40px;
    height: 40px;
    outline: none;
    border: none;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 5px;
}

/* 设置消息内容 */
.info p{
    max-width: 200px;
    width: fit-content;
    padding: 13px 15px;
    border-radius: 10px;
    align-self: center;
}
.info h6{
    font-size: 14px;
    font: 0;
    color: darkgrey;
}
.message-show .message-right #gth {
    /* 单独让 id 为 gth 的子元素靠左 */
    margin-right: auto;
}
#gth{
  display: inline-block; 
    width: 17px;         
    height: 17px;        
    margin: 0 16.5px;    
    outline: none;
    border: none;
    background-repeat: no-repeat;
}
/* 设置 发送消息人的名字 */
.message-show .message-right .box h6{
   text-align: right;
}

/* 根据消息是否是自己来设置消息的背景颜色 */
/* 自己发的颜色要绿色的 */
.message-show .message-right .box p {
    background-color: rgb(137, 217,97);
}
/* 其他人发的要 白色背景 */
.message-show .message-left .box p {
    background-color: rgb(255, 255, 255);
}

/* 头像也要根据发送人决定靠左靠右 */
/*  设置为右边是 翻转子元素的排序顺序 */
.message-show .message-right .box{
    flex-direction: row-reverse; 
}

/* 设置输入框 */

.right .message-input{
   /* input不能直接设置尺寸,要先设计块级元素 */
   display: block;
   width: 100%;
   height: 13%;
   /* 去除轮廓 */
   border: none;
   outline: none;
   /* 背景颜色 和文字排序顺序 */
   background-color: rgb(245, 245, 245);
   text-align: left;
   padding: 10px 10px;
   font-size: 20px;
   /* 不允许调整输入框大小 */
   resize: none;
}



/* 设置发送按钮 */
.right .send{
     height: 5%;
     padding:5px 10px ;
     display: flex;
    justify-content: flex-end;
}

.send button{
    height: 32px;
    width: 70px;
    /* 字体颜色 */
    color: rgb(12, 163,4);
    border-radius: 5px;
    background-color: white;
    border: 1px solid rgb(203, 195, 195);
}
/* 设置按钮点击事件 */
.send button:active{
    background-color: darkgrey;
}
